<script setup>
  const props = defineProps({
    data: [Object],
  })

  const src = computed(() => {
    // 判断data.img 是否含有http
    if (props.data.img && !props.data.img.includes('http')) {
      return './worker/' + props.data.img
    }
    return props.data.img
  })
</script>

<template>
  <div v-if="data" class="rounded-full flex items-center justify-center gap-2">
    <template v-if="data.img">
      <img :src="src" class="w-6 h-6 aspect-square object-cover rounded-full ring-1 ring-white/20" />
    </template>
    <template v-else>
      <span class="w-6 h-6 aspect-square object-cover rounded-full ring-1 ring-white/20 text-center bg-indigo-500" v-if="data.name">{{
        data.name.substr(0, 1)
      }}</span>
    </template>

    <div class="text-white/80 text-sm flex-1" v-if="data.name">{{ data.name }}</div>
  </div>
</template>
